<template>
  <div class="delivery">
    <div class="tabes">
      <div v-if="list.length===0">暂无数据</div>
      <!-- <van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad" :offset="30"> -->
      <div class="zwlbdetails">
        <ul>
          <li v-for="(item,index) in list" :key="index+'resume'">
            <div class="resumemanagent">

              <div @click="companyDetails(index)">
                <div style="float:left;position: relative;">
                  <span>
                    <img class="datelzygsmsimgresy" :src="logo" />
                  </span>
                  <div class="regd" v-if="item.unReadNum ===0">{{item.unReadNum>99?99:item.unReadNum}}</div>
                </div>
                <div class="comname">
                  <p style="padding-top: 0.2rem;">
                    <span class="datelzy">{{item.senderUserName}}</span>
                    <span class="datelzcpm">{{item.jobName}}·HR</span>
                    <span class="datelzytime">{{item.updateTime}}</span>
                  </p>
                  <p>
                    <span class="datelz" style="display: inline-block;  overflow: hidden;"
                      v-if="item.unReadNum ===0">[已读]</span>
                    <span class="datelz" style="display: inline-block;  overflow: hidden;color:red" v-else>[未读]</span>
                    <span class="dattext">{{item.lastMsg}}</span>
                  </p>
                </div>
              </div>

            </div>
            <van-divider style="margin-top: 0.7rem;" color="#E8E8E8" />
          </li>
        </ul>
      </div>

      <!-- </van-list> -->

    </div>

  </div>
</template>

<script>
import { _debounce } from '@/assets/js/public'
import SEEALSO from '@/api/seealso'
import timedate from '@/assets/js/datatime'
export default {

  data () {
    return {
      show: false,
      active: 1,
      search: '',
      activlist: ['投递', '收藏'],
      logo: require('@/assets/img/avatar.png'),
      reslit: {
        name: '远大科技有限公司',
        scaleText: '100-499人',
        natureText: '私营企业'
      },
      pageInfo: {
        page: 1,
        size: 10
      },
      list: [],
      loading: false,
      finished: false
    }
  },
  methods: {

    onsearch () {

    },
    chatList () {
      let that = this
      let parms = {}
      SEEALSO.chatList(parms).then(res => {
        console.log(res.data)
        that.loading = false
        if (res.data.code === 200) {
          if (res.data.data.length !== 0) {
            for (let i = 0; i < res.data.data.length; i++) {
              res.data.data[i].updateTime = timedate(
                res.data.data[i].updateTime
              )
            }
          }





        }

      })
    },
    companyDetails (index) {
      if (index === 0) {
        this.$router.push({
          name: 'master',
          query: {
            session: 'master',
            wo: 1,
            ni: 2
          }
        })
      } else {
        this.$router.push({
          name: 'master',
          query: {
            session: 'master',
            wo: 2,
            ni: 1
          }
        })
      }

    },
    // // 上拉加载
    // onLoad: _debounce(function (_type, index, item) {
    //   let that = this
    //   console.log(that.pageInfo.page, 'that.pageInfo.page')

    //   that.loading = false

    //   that.pageInfo.page++
    // }, 2000)
  },
  created () {
    this.chatList()
  }
}
</script>

<style scoped>
.buttontab {
  display: inline-block;
  width: 140px;
  height: 40px;
  line-height: 40px;
  background: rgba(24, 147, 252, 1);
  border: 1px solid rgba(24, 147, 252, 1);
  font-size: 26px;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 6px;
}
.mgch {
  font-size: 24px;

  color: rgba(255, 147, 121, 1);
  opacity: 1;
}
.fgx {
  border-top: 1px solid #ccc;
}
.datelzygsmsimgresy {
  width: 120px;
  height: 120px;
  border-radius: 100%;
}
.comname {
  /* line-height: 80px; */
  margin-left: 1.7rem;
}
/* .zwlbdetails {
  margin: 40px;
} */
.zwlbdetails ul li {
  position: relative;
  margin: 0 20px;
  background: rgba(255, 255, 255, 1);
  /* border: 1px solid rgba(240, 240, 240, 1);
  box-shadow: 0px 3px 8px rgba(35, 35, 35, 0.16); */
  opacity: 1;
  /* border-radius: 8px; */
}
.zwlbdetails ul .zwlbsj {
  float: right;
  padding-right: 12px;
}
.zwlbdetails ul li .positionzz {
  margin: 0;
}
.zwlbdetails ul li .positionzw {
  margin-top: 40px;
}
.verticalresume {
  margin-top: 18px;
}
.resumemanagent {
  margin: 0 28px;
}
.tabes {
  position: relative;
  margin-top: 10px;
}
.datelz {
  font-size: 24px;
  color: rgba(153, 153, 153, 1);
}
.datelzytime {
  float: right;
  font-size: 24px;
  color: rgba(153, 153, 153, 1);
}
.datelzy {
  display: inline-block;
}
.dattext {
  width: 5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  margin-left: 0.4rem;
}
.datelzcpm {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 24px;
  color: rgba(153, 153, 153, 1);
}
.regd {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background: rgba(253, 78, 64, 1);
  border-radius: 50%;
  font-size: 23px;
  line-height: 32px;
  color: rgba(255, 255, 255, 1);
}
</style>
